<template>
    <div class="answer-test-paper-increase">
        <!-- 新增弹窗 -->
        <a-modal
         class="answer-test-paper-modal"
         :visible="visibleShow" 
         title='答案编辑'
         @ok="visibleShow = false" 
         :maskClosable="false"
         cancelText=""
         :centered="true"
         :closable="false"
         >
            <a-spin size="large" :spinning="spinning" :key="spinningKey">
                <div >
                    <a-button class="blue-btn" type="primary" @click="returnClick()">返回</a-button>
                    <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="refreshClick()">刷新</a-button>
                </div>
                <div style="width: 100%;height: 30px;"></div>
                <div class="btn-box">
                    <div></div>
                    <a-form layout="inline">
                        <a-form-item>
                            <a-button class="blue-btn" type="primary" @click="increaseClick">新增</a-button>
                        </a-form-item>
                        <a-form-item>
                            <a-button class="red-btn" type="primary" @click="batchDeletion" >删除</a-button>
                        </a-form-item>
                    </a-form>
                </div>
                <a-table
                :key="answerTableKey"
                bordered 
                :data-source="dataSource" 
                :columns="columns" 
                :pagination="pagination"
                @change="changePagination"
                rowKey="id"
                :rowSelection="{ onChange:onChange}"
                >
                    <template slot="fwjtmxx" slot-scope="text, record">
                        <div style="width: 100%;height: 54px;" v-show="currentId !== record.id " @click="fsjtmxxClick(record)">
                            <span>{{ record.fwjtmxx }}</span>
                        </div>
                        <div v-show="currentId === record.id">
                            <a-input ref="refAnswerInput" type="text" v-model="record.fwjtmxx" @blur="blurRecord($event,record)"/>
                        </div>
                    </template>
                    <!-- <template slot="fsfzqda" slot-scope="text, record">
                        <div>
                            <a-switch :disabled="titleType === '主观'?true:false" :defaultChecked="false" v-model:checkbox="record.answerSwitch" @change="switchChange(record)"/>
                        </div>
                    </template> -->
                </a-table>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import {answerAdd,answerDelete,answerEdit,answerList} from './service/index'
export default {
    components:{
    },
    data(){
        return{
            spinningKey:null,
            spinning:true,
            visibleShow:false,
            confirmLoading:false,
            formState:{},
            currentFsjtmid:'',
            pagination:{
                position:'bottom',//指定分页显示的位置 'top' | 'bottom' | 'both'
                pageSize: 10,
                current: 1,
                total: 0,
                showTotal: (total, range) => {
                    // return this.$t('m.common.label.page_total', [range[0], range[1], total])
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
            },
            dataSource:[],
            columns:[{
                    title: '序号', //列头显示文字
                    dataIndex: 'fxh',
                    key: 'fxh',
                    width:70,
                },{
                    title: '答案',
                    dataIndex: 'fwjtmxx',
                    key: 'fwjtmxx',
                    scopedSlots: {customRender: 'fwjtmxx'},
                }
                // ,{
                //     title: '是否正确',
                //     dataIndex: 'fsfzqda',
                //     key: 'fsfzqda',
                //     scopedSlots: {customRender: 'fsfzqda'},
                // }
            ],
            selectedRowKeys:[],
            currentId:'',
            currentRecord:'',
            titleType:'',
            answerTableKey:null
        }
    },
    mounted(){
        
    },
    updated(){
        this.cancelLoading()
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        getAnswerData(val){
            this.answerDetailed = val
            this.spinning = true
            this.currentFsjtmid = val.id
            this.titleType = val.ftmlx
            this.getList(undefined,this.pagination.current,val.id)
        },
        getList(param,pagination,fwjtmid){
            var parameter= {
                ...param,
                pageNo:pagination.current,
                pageSize:this.pagination.pageSize,
                fwjtmid:fwjtmid,
            }
            answerList(parameter).then(res=>{
                if(res.code == 200){
                    this.dataSource = res.result.records.map(i=>{return {answerSwitch:i.fsfzqda === '是'?true:false,...i}})
                    this.pagination.total = res.result.total || 0;
                    this.answerTableKey = Date.now()
                }else{
                    this.answerTableKey = Date.now()
                    this.$message.warning(res.message)
                    this.dataSource = []
                    this.pagination.total = 0
                }
            })
        },
        changePagination(pagination,filters,sorter){
            this.pagination.current = pagination.current;
            this.getList(undefined, pagination.current,this.currentFsjtmid);

        },
        
        onChange(key){//选择表格项
            //console.log(key)
            this.selectedRowKeys = key
        },
        increaseClick(){//新增
            if(this.titleType==='主观'&& this.dataSource.length){
                this.$message.warning('主观题只能有一个参考答案')
            }else{
                this.dataSource.push({id:new Date().getTime(),fxh:'',fwjtmxx:'',fsfzqda:'否',answerSwitch:this.titleType == '主观'?true:false})
            }
            
        },
        batchDeletion(){//删除
            
            var that = this
            if(!this.selectedRowKeys.length){
                that.$message.warning('请选择删除项')
            }else{
                this.$confirm({
                    title:'您确认要删除吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        
                        answerDelete({ids:that.selectedRowKeys.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.$message.success('删除成功')
                                that.getList(undefined,that.pagination.current,that.currentFsjtmid)
                            }else{
                                that.$message.warning(res.message)
                            }              
                        })
                    },
                    
                });
            }
        },
        fsjtmxxClick(val){//点击答案
            this.currentId = val.id
            this.currentRecord = val.fwjtmxx
            this.$nextTick(x => {
                this.$refs.refAnswerInput.focus()
            })
        },
        switchChange(val){//开关
            var data = {
                fwjtmid:this.currentFsjtmid,
                fwjtmxx:val.fwjtmxx,
                fsfzqda:val.answerSwitch === true?'是':'否'
            }
            if(!Number.isFinite(val.id)){
                data.id = val.id
            
                answerEdit(data).then(res=>{
                    this.getList(undefined, this.pagination.current,this.currentFsjtmid);
                })
            }else{
                answerAdd(data).then(res=>{
                    this.getList(undefined, this.pagination.current,this.currentFsjtmid);
                })
            }
        },
        blurRecord(val,item){
            //console.log(val,item)
            var data = {
                fwjtmxx:item.fwjtmxx,
                fsfzqda:item.fsfzqda,
                fwjtmid:this.currentFsjtmid,
            }
            if(!Number.isFinite(item.id)){
                data.id = item.id
            
                answerEdit(data).then(res=>{
                    this.getList(undefined, this.pagination.current,this.currentFsjtmid);
                })
            }else{
                answerAdd(data).then(res=>{
                    this.getList(undefined, this.pagination.current,this.currentFsjtmid);
                })
            }

            this.currentId = ''
        },
        returnClick(){//返回
            this.visibleShow = false
        },
        refreshClick(){
            this.$emit('refreshClick')
            this.spinning = true
            this.spinningKey = Date.now()
            this.cancelLoading()
            this.answerTableKey = Date.now()
        },

    }

}

</script>
<style>
/* .ant-form-item-label{
    font-weight: 600;
} */

 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-upload-list{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 /* .answer-test-paper-modal .ant-modal-header{
    display: none !important;
 } */
 .answer-test-paper-modal .ant-modal-footer{
    display: none !important;
 }
 .answer-test-paper-modal .ant-modal-content{
    width: 660px !important;
 }

 .observer-lbrary-pages{
    background: #fff;
}
.btn-box{
    display: flex;
    justify-content: space-between;
}
.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
.red-btn{
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}
</style>